<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>阿里百秀</title>
    <!-- Bootstrap -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <!-- header -->
        <header class="col-md-2 no-padding header">
          <h1>
            <a href="#">
              <img class="hidden-xs" src="./images/logo.png" alt="">
              <span class="visible-xs">阿里百秀</span>  
            </a>
          </h1>
          <nav>
            <ul>
              <li>
                <a href="#">
                  <i class="glyphicon glyphicon-camera"></i>
                  <span>生活馆</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="glyphicon glyphicon-camera"></i>
                  <span>生活馆</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="glyphicon glyphicon-camera"></i>
                  <span>生活馆</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="glyphicon glyphicon-camera"></i>
                  <span>生活馆</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="glyphicon glyphicon-camera"></i>
                  <span>生活馆</span>
                </a>
              </li>
            </ul>
          </nav>
        </header>
        <!-- header结束 -->
        <!-- main区域 -->
        <main class="col-md-7 main">
          <!-- 图片新人 -->
          <ul class="news">
            <li>
              <a href="#">
                <img src="./images/lg.png" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/1.jpg" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/2.jpg" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/3.jpg" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./images/4.jpg" alt="">
                <p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
              </a>
            </li>
          </ul>
          <!-- 推荐 -->
          <div class="recommend">
            <div class="recommend-box row">
              <div class="col-md-9 content">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活<span></p>
              </div>
              <div class="col-md-3 img-box hidden-xs">
                <img src="./images/4.jpg" alt="">
              </div>
            </div>
            <div class="recommend-box row">
              <div class="col-md-9 content">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活<span></p>
              </div>
              <div class="col-md-3 img-box hidden-xs">
                <img src="./images/4.jpg" alt="">
              </div>
            </div>
            <div class="recommend-box row">
              <div class="col-md-9 content">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活<span></p>
              </div>
              <div class="col-md-3 img-box hidden-xs">
                <img src="./images/4.jpg" alt="">
              </div>
            </div>
            <div class="recommend-box row">
              <div class="col-md-9 content">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活<span></p>
              </div>
              <div class="col-md-3 img-box hidden-xs">
                <img src="./images/4.jpg" alt="">
              </div>
            </div>
            <div class="recommend-box row">
              <div class="col-md-9 content">
                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活<span></p>
              </div>
              <div class="col-md-3 img-box hidden-xs">
                <img src="./images/4.jpg" alt="">
              </div>
            </div>
          </div>
          <!-- 推荐部分结束 -->
        </main>
        <!-- main区域结束 -->
        <!-- aside区域 -->
        <aside class="col-md-3 aside">
          <a href="#">
            <img src="./images/zgboke.jpg" alt="">
          </a>
          <a href="#">
            <button type="button" class="btn btn-primary">热搜</button>
            <h4 class="text-primary">欢迎加入中国博客联盟</h4>
            <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
          </a>
        </aside>
        <!-- aside区域结束 -->
      </div>
    </div>
  </body>
</html>